<template>
  <div class="rule-list">
    <div class="rule-template" v-for="(col, colIndex) in ruleList" :key="colIndex">
      <!-- 选择对应的规则 -->
      <div class="rule-item">
        <a-select ref="select" v-model:value="col.rule" placeholder="规则">
          <a-select-option v-for="item in ruleTypeList" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div>
      <!-- 填写数值 -->
      <div class="rule-item">
        <a-input v-model:value="col.number" placeholder="规则数值" />
      </div>
      <!-- 操作 -->
      <div class="rule-item rule-opera">
        <a-switch v-model:checked="col.opera" checked-children="与" un-checked-children="或" />
        <DeleteFilled class="icon-delete" :style="{ fontSize: '18px' }" @click="ruleDelete(colIndex)" />
      </div>
    </div>
    <div class="rule-create" @click="ruleCreate">
      <PlusOutlined />
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';

  const formDefault = {
    column: undefined,
    rule: undefined,
    number: undefined,
    opera: true,
    ruleList: [],
  };

  const ruleList = ref([]); // 规则列表
  const ruleTypeList = ref([]);
  const ruleDict = {
    // SHORT INTEGER LONG FLOAT DOUBLE TIME
    rule1: [
      {
        label: '大于（>）',
        desc: '>',
        value: '1',
      },
      {
        label: '大于等于（>=）',
        desc: '>=',
        value: '2',
      },
      {
        label: '小于（<）',
        desc: '<',
        value: '3',
      },
      {
        label: '小于等于（<=）',
        desc: '<=',
        value: '4',
      },
      {
        label: '等于（=）',
        desc: '=',
        value: '5',
      },
      {
        label: '不等于（≠）',
        desc: '≠',
        value: '6',
      },
    ],
    // BOOLEAN
    rule2: [
      {
        label: '是',
        desc: '=1',
        value: '7',
      },
      {
        label: '否',
        desc: '=0',
        value: '8',
      },
    ],
    // STRING
    rule3: [
      {
        label: '包含',
        desc: 'like',
        value: '9',
      },
      {
        label: '等于',
        desc: '==',
        value: '10',
      },
      {
        label: '不包含',
        desc: 'notlike',
        value: '11',
      },
    ],
  };
  // 简单点吧，直接把规则的value取出来，给这个表单编辑的时候用
  const ruleObj = {
    1: 'rule1',
    2: 'rule1',
    3: 'rule1',
    4: 'rule1',
    5: 'rule1',
    6: 'rule1',
    7: 'rule2',
    8: 'rule2',
    9: 'rule3',
    10: 'rule3',
    11: 'rule3',
  };

  // 根据选择的点位字段，获取对应的规则
  function columnChange(val) {
    ruleList.value = [];
    if (val === 'BOOLEAN') {
      ruleTypeList.value = ruleDict.rule2;
    } else if (val === 'STRING') {
      ruleTypeList.value = ruleDict.rule3;
    } else {
      ruleTypeList.value = ruleDict.rule1;
    }
  }

  // 添加规则
  function ruleCreate() {
    ruleList.value.push({ ...formDefault });
  }

  // 删除规则
  function ruleDelete(index) {
    ruleList.value.splice(index, 1);
  }

  // 拼装规则
  // "{\"ruleList\":[{\"rule\":\"1\",\"column\":\"lon\",\"number\":\"0\"},{\"rule\":\"4\",\"column\":\"lon\",\"number\":\"180\"}],\"operation\":\"A&&A\"}"
  function getNowRule() {
    let list = [];
    let operation = '';

    ruleList.value.forEach((item, i) => {
      const { rule, column, number } = item;
      list.push({ rule, column, number });

      const variable = String.fromCharCode(65 + i); // 'A', 'B', 'C', ...
      const op = item.opera ? '&&' : '||';
      operation += variable + op;
    });

    operation = operation.slice(0, -2); // 去掉最后的 && 或 ||

    return { ruleList: list, operation };
  }

  // 编辑
  function editRule(content) {
    let list = [];
    const opera = content.operation.match(/&&|\|\|/g) || ['||'];
    content.ruleList.forEach((item, index) => {
      list.push({
        rule: item.rule,
        number: item.number,
        opera: opera[index] === '&&',
      });
      ruleTypeList.value = ruleDict[ruleObj[item.rule]];
    });
    ruleList.value = list;
  }

  defineExpose({
    columnChange,
    getNowRule,
    editRule,
  });
</script>

<style scoped>
  .rule-template {
    display: grid;
    grid-template-columns: 38.5% 38.5% 13%;
    grid-column-gap: 5%;
    margin-bottom: 13px;
  }
  .rule-opera {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rule-create {
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
  }
  .rule-create:hover {
    border-color: #1677ff;
    color: #1677ff;
  }
  .icon-delete {
    cursor: pointer;
    color: rgb(192, 30, 30);
  }
  .icon-delete:hover {
    color: #f00;
  }
</style>
